<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :rules="rules" size="small" :inline="true" v-show="showSearch" label-width="84px">
      <el-form-item label="学期" prop="semester">
        <el-select v-model="queryParams.semester" filterable placeholder="不选则默认为当前学期">
          <el-option
            v-for="item in semesterOption"
            :key="item.id"
            :label="item.semesterName"
            :value="item.semesterName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="周次" prop="week">
        <el-input
          v-model="queryParams.week"
          placeholder="1~20"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="星期" prop="day">
        <el-select v-model="queryParams.day" filterable clearable>
          <el-option
            v-for="item in dayOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>



    <el-table
      v-loading="loading"
      border :data="scheduleList"
      :span-method="objectSpanMethod"
    >
      <el-table-column label="星期" align="center" prop="day" />
      <el-table-column label="实验室" align="center" prop="labName" />
      <el-table-column label="机房" align="center" prop="labNumber" />
      <el-table-column label="1-2" align="center" prop="info_1_2"/>
      <el-table-column label="3-5" align="center" prop="info_3_5" />
      <el-table-column label="6-7" align="center" prop="info_6_7" />
      <el-table-column label="8-9" align="center" prop="info_8_9" />
      <el-table-column label="10-12" align="center" prop="info_10_12" />
      <el-table-column label="13-15 " align="center" prop="info_13_15" />
    </el-table>

  </div>
</template>

<script>
import { listSchedule } from "@/api/jwxt/courseSchedule";
import {getSemesterList} from "@/api/jwxt/scheduling";

export default {
  name: "Schedule",
  dicts: [],
  data() {
    return {
      // 存放所有的表头
      colFields: [
        "day",
        "labName",
        "labNumber",
        "info_1_2",
        "info_3_5",
        "info_6_7",
        "info_8_9",
        "info_10_12",
        "info_13_15"
      ],
      //存储合并单元格的开始位置
      spanArr: [],
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 排课表格数据
      scheduleList: [],
      // 学期动态下拉框数据
      semesterOption:{},
      // 表单检验规则
      rules: {
        week:{ pattern:/^(1[0-9]?|20|[1-9])$/,message: "周次为1~20",trigger: "blur"}
      },
      // 查询参数
      queryParams: {
        semester: null,
        week: 1,
        day: null
      },
      //
      dayOptions: [
        {
          value: null,
          label: '不筛选'
        }, {
        value: 1,
        label: '星期一'
      }, {
        value: 2,
        label: '星期二'
      }, {
        value: 3,
        label: '星期三'
      }, {
        value: 4,
        label: '星期四'
      }, {
        value: 5,
        label: '星期五'
      }, {
        value: 6,
        label: '星期六'
      }, {
        value: 7,
        label: '星期日'
      }
      ],
    };
  },
  created() {
    this.getList();
    this.fillSemesterOption();
  },
  methods: {
    /** 查询实验室列表列表 */
    getList() {
      this.loading = true;
      listSchedule(this.queryParams).then(response => {
        this.scheduleList = response.data;
        this.loading = false;
        this.getSpanArr();
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.$refs["queryForm"].validate(vaild=>{
        if(vaild){this.getList();}
        else {this.$message.error("搜索参数不合法！")}
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /**
     * 分析每一列，找出相同的
     */
    getSpanArr() {
      for (let i = 0; i < this.scheduleList.length; i++) {
        let row = i;
        if (row === 0) {
          // i 表示行 j表示列
          for (let j = 0; j < this.colFields.length; j++) {
            this.spanArr[i * this.colFields.length + j] = {
              rowspan: 1,
              colspan: 1,
            };
          }
        } else {
          for (let j = 0; j < this.colFields.length; j++) {
            // 合并所有列的相同数据单元格
            if (
              this.colFields[j] == "day" ||
              this.colFields[j] == "labName"
            ) {
              if (
                this.scheduleList[row][this.colFields[j]] ===
                this.scheduleList[row - 1][this.colFields[j]]
              ) {
                let beforeItem =
                  this.spanArr[(row - 1) * this.colFields.length + j];
                this.spanArr[row * this.colFields.length + j] = {
                  rowspan: 1 + beforeItem.rowspan, // 合并几行
                  colspan: 1, // 合并几列,我这里只是跨行合并,不跨列合并,所以用的1
                };
                beforeItem.rowspan = 0;
                beforeItem.colspan = 0;
              } else {
                // rowspan 和 colspan 都为1表格此单元格不合并
                this.spanArr[row * this.colFields.length + j] = {
                  rowspan: 1,
                  colspan: 1,
                };
              }
            }
          }
        }
      }
      // 对数据进行倒序
      let stack = [];
      for (let i = 0; i < this.colFields.length; i++) {
        for (let j = 0; j < this.scheduleList.length; j++) {
          // i 表示列 j表示行
          if (j === 0) {
            if (this.spanArr[j * this.colFields.length + i].rowspan === 0) {
              stack.push(this.spanArr[j * this.colFields.length + i]);
            }
          } else {
            if (this.spanArr[j * this.colFields.length + i].rowspan === 0) {
              stack.push(this.spanArr[j * this.colFields.length + i]);
            } else {
              stack.push(this.spanArr[j * this.colFields.length + i]);
              while (stack.length > 0) {
                let pop = stack.pop();
                let len = stack.length;
                this.spanArr[(j - len) * this.colFields.length + i] = pop;
              }
            }
          }
        }
      }
    },
    // 单元格合并方法
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      return this.spanArr[rowIndex * this.colFields.length + columnIndex];
    },
    /** 填充学期动态下拉框数据 */
    fillSemesterOption(){
      getSemesterList().then(respon=>{
        this.semesterOption=respon.data;
      })
    }
  }
};
</script>

<style scoped>
::v-deep .el-table .cell {
  white-space: pre-line;
}
</style>
